<template>
  <div>
    <!-- <div class="title">增加用户名下的卡号，<span>*</span>需要超管密码。</div> -->
    <LittleTitle :title="`将卡号绑定到指定用户名下，需要超管密码。`"></LittleTitle>
    <div class="add-number">
      <div class="add-number-item">
        用户名：<a-input class="input" v-model="add.username"></a-input>
      </div>
      <div class="add-number-item">
        卡号：<a-input class="input" v-model="add.cardNumber"></a-input>
      </div>
      <div class="add-number-item">
        超级管理密码：<a-input
          class="input"
          type="password"
          v-model="add.rootPassword"
        ></a-input>
      </div>
      <a-button type="primary" @click="addNumber">绑定卡号</a-button>
    </div>

    <LittleTitle :title="`将卡号从用户名下解除绑定，需要超管密码。`"></LittleTitle>
    <div class="add-number">
      用户名：<a-input class="input" v-model="del.username"></a-input>
      卡号：<a-input class="input" v-model="del.cardNumber"></a-input>
      超级管理密码：<a-input
        class="input"
        type="password"
        v-model="del.rootPassword"
      ></a-input>
      <a-button type="primary" @click="checkAndDel">解除卡号</a-button>
    </div>

    <!-- <div class="title">查询用户名下的卡号，<span>*</span>需要超管密码。</div> -->
    <LittleTitle :title="`查询用户名下的卡号，需要超管密码。`"></LittleTitle>
    <div class="get-number">
      <div class="add-number-item">
        用户名：<a-input class="input" v-model="getNumber.username"></a-input>
      </div>
      <div class="add-number-item">
        超级管理密码：<a-input
          class="input"
          type="password"
          v-model="getNumber.rootPassword"
        ></a-input>
      </div>

      <a-button type="primary" @click="getCardnumber">查询</a-button>
    </div>

    <!-- 数据板块 -->
    <div v-if="getNumShow">
      <div style="margin-bottom: 10px">
        用户
        <span style="font-size: 18px; font-weight: 500; color: black"
          >{{ getNumber.username }} </span
        >已绑定的卡号：
      </div>
      <a-table :data-source="cardNumberData" :columns="columns" :key="1">
        <div
          slot="filterDropdown"
          slot-scope="{
            setSelectedKeys,
            selectedKeys,
            confirm,
            clearFilters,
            column,
          }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="(c) => (searchInput = c)"
            :placeholder="`Search ${column.dataIndex}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="
              (e) => setSelectedKeys(e.target.value ? [e.target.value] : [])
            "
            @pressEnter="
              () => handleSearch(selectedKeys, confirm, column.dataIndex)
            "
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            Search
          </a-button>
          <a-button
            size="small"
            style="width: 90px"
            @click="() => handleReset(clearFilters)"
          >
            Reset
          </a-button>
        </div>
        <a-icon
          slot="filterIcon"
          slot-scope="filtered"
          type="search"
          :style="{ color: filtered ? '#108ee9' : undefined }"
        />

        <template slot="operation" slot-scope="text, record">
          <a-popconfirm
            v-if="cardNumberData.length"
            title="确定解除绑定吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="comfirmDel(text, record)"
          >
            <!-- <a href="javascript:;">解绑</a> -->
            <button class="operate">解绑</button>
          </a-popconfirm>
        </template>
      </a-table>
    </div>

    <!-- 确认对话框 -->
    <div v-show="delShow">
      <a-modal
        title="验证"
        :visible="delShow"
        :confirm-loading="confirmLoading"
        @ok="delNumber"
        @cancel="delShow = false"
      >
        <div style="margin-bottom: 20px">
          <span style="color: red">*</span> 请输入超级管理密码：
        </div>
        <a-input v-model="del.rootPassword" type="password"></a-input>
      </a-modal>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      add: {
        cardNumber: "",
        rootPassword: "",
        username: "",
      },
      del: {
        cardNumber: "",
        rootPassword: "",
        username: "",
      },
      getNumber: {
        username: "xhc",
        rootPassword: "root",
      },
      delShow: false,
      confirmLoading: false,
      // 列表需要的数据
      getNumShow: false,
      cardNumberData: [],
      searchText: "",
      searchInput: null,
      searchedColumn: "",

      columns: [
        {
          title: "卡号",
          dataIndex: "cardnumber",
          key: "cardnumber",
          scopedSlots: {
            filterDropdown: "filterDropdown",
            filterIcon: "filterIcon",
          },
          onFilter: (value, record) =>
            record.cardnumber
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              }, 0);
            }
          },
        },
        {
          title: "绑定时间",
          dataIndex: "gmtCreate",
          key: "gmtCreate",
        },
        {
          title: "最后一次修改时间",
          dataIndex: "gmtModified",
          key: "gmtModified",
        },
        {
          title: "解除绑定",
          dataIndex: "delCard",
          key: "delCard",
          scopedSlots: { customRender: "operation" },
        },
      ],
    };
  },
  methods: {
    async addNumber() {
      const res = await this.$_api.addCardnumber(this.add);
      const msg = res.data.data.message;
      switch (msg) {
        case "超管密码不正确":
          this.$message.warning("超管密码不正确，请重新输入！");
          break;
        case "卡号长度不对":
          this.$message.warning("卡号长度不对，请确认卡号是否为6位英文与数字的组合！");
          break;
        case "用户不存在":
          this.$message.warning("用户不存在，请确认用户名！");
          break;
        case "增加成功":
          this.$message.success(
            `卡号${this.add.cardNumber}与用户${this.add.username}绑定成功！`
          );
          for (let i in this.add) {
            this.add[i] = "";
          }
          break;
        default:
          this.$message.warning("卡号增加失败，请重试！");
      }
    },
    comfirmDel(t, r) {
      this.delShow = true;
      this.del.cardNumber = r.cardnumber;
      this.del.username = r.username;
    },
    async checkAndDel(){
      const res = await this.$_api.checkNumber(this.del);
      console.log(res);
      const msg = res.data.data.message;
      console.log(msg)
      if(msg === "匹配"){
        this.delNumber();
      }else if(msg === "不匹配"){
        this.$message.error("用户名与卡号不匹配，解绑失败！");
      }else {
        this.$message.error("Error");
      }
    },
    async delNumber() {
      this.confirmLoading = true;
      const res = await this.$_api.delCardnumber(this.del);
      const msg = res.data.data.message;
      switch (msg) {
        case "超管密码不正确":
          this.$message.warning("超管密码不正确，请重新输入！");
          break;
        case "卡号长度不对":
          this.$message.warning("卡号长度不对，请确认卡号是否为6位数字！");
          break;
        case "删除成功":
          this.$message.success(
            `卡号${this.del.cardNumber}与用户${this.del.username}已解绑！`
          );
          this.confirmLoading = false;
          this.delShow = false;
          this.getCardnumber();
          break;
        default:
          this.$message.warning(
            "卡号删除失败，请检查您的用户名以及卡号是否正确！"
          );
      }
    },
    async getCardnumber() {
      if (!this.getNumber.username) {
        this.$message.warning("请输入用户名！");
      } else if (!this.getNumber.rootPassword) {
        this.$message.warning("请输入超级管理密码！");
      } else {
        const res = await this.$_api.getCardnumberByUser(this.getNumber);
        if (res.data.data.data == null) {
          this.$message.warning("超级管理密码不正确，请重新输入！");
        } else {
          this.cardNumberData = res.data.data.data;
          this.getNumShow = true;
        }
      }
    },

    handleSearch(selectedKeys, confirm, dataIndex) {
      confirm();
      this.searchText = selectedKeys[0];
      this.searchedColumn = dataIndex;
    },

    handleReset(clearFilters) {
      clearFilters();
      this.searchText = "";
    },
  },
};
</script>
<style lang="less" scoped>
span {
  color: red;
}
.input {
  width: 200px;
  margin-right: 10px;
}
.add-number {
  margin-bottom: 80px;
}
.add-number-item {
  display: inline-block;
}
@media screen and (max-width: 800px) {
  .add-number-item {
    display: block;
    margin-bottom: 20px;
  }
}
.get-number {
  margin-bottom: 20px;
}
.operate{
  border: none;
  color: white;
  background: #4396f5;
  border-radius: 5px;
  outline: none;
  padding: 4px 10px;

  transition: background 0.5s;
  &:hover{
    cursor: pointer;
    background: #0066da;
  }
}
</style>
